// G2.Global.setTheme('dark'); 
// #region 面积图
(function () {
    function createChart(id) {
      var chart = new G2.Chart({
        container: id,
        forceFit: true,
        height: 500,
        padding: [20, 40, 50, 50],
        background: {
          fill: '#0a1631',
          // opacity: 1,
          // fillOpacity: 1
        },
        animate: false
      });
  
      chart.scale("Data", {
        range: [0, 1],
        tickCount: 10,
        type: "linear"
      });
      chart.axis("Data", {
        label: {
          textStyle: {
            fill: "#aaaaaa"
          }
        }
      });
      chart.axis("sales", {
        label: {
          textStyle: {
            fill: "#aaaaaa"
          },
          formatter: text => {
            return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
          }
        }
      });
      chart.tooltip({
        crosshairs: "y",
        share: true
      });
      chart.legend({
        attachLast: true
      });
  
      chart.line().position("Data*sales");
      chart.area().position("Data*sales");
  
      return chart;
    }
  
    function fetchData() {
      // return fetch("./js/data/fireworks-sales.json").then(function(res) {
      //   return res.json();
      // });
  
      var data = [{
          Data: "1",
          sales: 1998
        },
        {
          Data: "2",
          sales: 1850
        },
        {
          Data: "3",
          sales: 1720
        },
        {
          Data: "4",
          sales: 1818
        },
        {
          Data: "5",
          sales: 1920
        },
        {
          Data: "6",
          sales: 1802
        },
        {
          Data: "7",
          sales: 1202
        },
        {
          Data: "8",
          sales: 1502
        },
        {
          Data: "9",
          sales: 1920
        },
        {
          Data: "10",
          sales: 1802
        },
        {
          Data: "11",
          sales: 1202
        },
        {
          Data: "11",
          sales: 1502
        }
      ];
      return Promise.resolve(data);
    }
  
    function asyncDemo(chart, data) {
      var n = 12;
  
      setInterval(function () {
        data.shift();
        data.push({
          Data: (++n).toString(),
          sales: (Math.random() * 2000) >>> 0
        });
        chart.changeData(data);
      }, 400000);
    }
  
    var chart = createChart("chart1");
  
    var promise = fetchData().then(data => {
      chart.source(data);
      chart.render();
      asyncDemo(chart, data);
    });
  })();
  // #endregion
  
  // #region 柱状图
  (function () {
    function createChart(id) {
      var chart = new G2.Chart({
        container: id,
        forceFit: true,
        height: 500,
        padding: [20, 20, 50, 30]
      });
      chart.scale("value", {
        alias: "销售额(万)"
      });
      chart.axis("time", {
        label: {
          textStyle: {
            fill: "#aaaaaa"
          }
        },
        tickLine: {
          alignWithLabel: false,
          length: 0
        }
      });
  
      chart.axis("value", {
        label: {
          textStyle: {
            fill: "#aaaaaa"
          }
        }
      });
  
      chart.tooltip({
        share: true
      });
      chart
        .interval()
        .position("time*value")
        .opacity("time", val => {
          if (val === "13:00-14:00") {
            return 0.4;
          }
          return 1;
        })
        .style("time", {
          lineWidth: val => {
            if (val === "13:00-14:00") {
              return 1;
            }
            return 0;
          },
          stroke: "#636363",
          lineDash: [3, 2]
        });
  
      return chart;
    }
  
    function fetchData() {
      var data = [{
          time: "9:00-10:00",
          value: 30
        },
        {
          time: "10:00-11:00",
          value: 90
        },
        {
          time: "11:00-12:00",
          value: 50
        },
        {
          time: "12:00-13:00",
          value: 30
        },
        {
          time: "13:00-14:00",
          value: 70
        }
      ];
      return Promise.resolve(data);
    }
  
    function asyncDemo(chart, data) {
      setInterval(function () {
        data.forEach(function (row) {
          row.value = (Math.random() * 100) >>> 0;
        });
        chart.changeData(data);
      }, 1000);
    }
  
    var chart = createChart("chart2");
  
    var promise = fetchData().then(data => {
      chart.source(data);
      chart.render();
      asyncDemo(chart, data);
    });
  })();
  // #endregion
  
  // #region 饼图
  (function () {
    function createChart(id) {
      var chart = new G2.Chart({
        container: id,
        forceFit: true,
        height: 500,
        padding: "auto"
      });
      chart.legend(false);
      chart.coord("theta", {
        radius: 0.75
      });
      const pie = chart
        .intervalStack()
        .position("value")
        .color("type", ["#063d8a", "#1770d6", "#47abfc", "#38c060"])
        .style({
          opacity: 0.4
        })
        .select(true, {
          style: {
            stroke: "black",
            lineWidth: 2,
            opacity: 1
          }
        })
        .label("type", val => {
          const opacity = val === "四线及以下" ? 1 : 0.5;
          return {
            offset: -30,
            textStyle: {
              opacity,
              fill: "white",
              fontSize: 12,
              shadowBlur: 2,
              shadowColor: "rgba(0, 0, 0, .45)"
            },
            formatter: (text, item) => {
              const d = item.point;
              return d.type + "\n" + d.value + "%";
            }
          };
        });
  
      return chart;
    }
  
    function fetchData() {
      var data = [{
          type: "一线城市",
          value: 0.19
        },
        {
          type: "二线城市",
          value: 0.21
        },
        {
          type: "三线城市",
          value: 0.27
        },
        {
          type: "四线及以下",
          value: 0.33
        }
      ];
      return Promise.resolve(data);
    }
  
    function asyncDemo(chart, data) {
      setInterval(function () {
        function getRan() {
          var arr = [];
          arr[0] = (Math.random() * 100) >>> 0;
          arr[1] = (Math.random() * (100 - arr[0])) >>> 0;
          arr[2] = (Math.random() * (100 - arr[0] - arr[1])) >>> 0;
          arr[3] = 100 - arr[0] - arr[1] - arr[2];
          return arr;
        }
  
        var arr = getRan();
  
        data.forEach(function (row, i) {
          row.value = arr[i] / 100;
        });
        chart.changeData(data);
      }, 3000);
    }
  
    var chart = createChart("chart3");
    var promise = fetchData().then(data => {
      chart.source(data);
      chart.render();
      asyncDemo(chart, data);
    });
  })();
  // #endregion
  


上海市
云南省
内蒙古自治区
北京市
台湾省
吉林省
四川省
天津市
宁夏回族自治区
安徽省
山东省
山西省
广东省
广西壮族自治区
新疆维吾尔自治区
江苏省
江西省
河北省
河南省
浙江省
海南省
湖北省
湖南省
澳门特别行政区
甘肃省
福建省
西藏自治区
贵州省
辽宁省
重庆市
陕西省
青海省
香港特别行政区
黑龙江省